<template>
  <div class="container">
    <mt-swipe :auto="0" class="article-swipe">
      <mt-swipe-item v-for="(item, index) in articles" :key="index" :style="{backgroundImage:`url(${item.image})`}" class="article-swipe-item">
        <span class="swipe-tag" v-if="item.tag">{{item.tag}}</span>
        <div class="swipe-info">
          <p class="info-title">{{item.title}}</p>
          <p class="info-num" v-if="item.num">人气：{{item.num}}</p>
        </div>
      </mt-swipe-item>
    </mt-swipe>
    <div class="divide"></div>
    <div class="card-wrap">
      <router-link :to="{name:'Share'}">
        <div class="card-item blue-bg">
          <div class="card-txt">
            <p class="card-title">分享名单</p>
            <p class="card-content">通过分享好友获取精美礼物</p>
          </div>
          <img class="card-icon" src="http://piccdn.50yoga.cn/pics/public/sweet/images/recognition/share-icon.png"/>
        </div>
      </router-link>
      <a :href="''">
        <div class="card-item green-bg">
          <div class="card-txt">
            <p class="card-title">关于In Yoga</p>
            <p class="card-content">提倡瑜伽式生活理念做出精致的门店</p>
          </div>
          <img class="card-icon" src="http://piccdn.50yoga.cn/pics/public/sweet/images/recognition/inyoga-icon.png"/>
        </div>
      </a>
    </div>
    <div class="divide"></div>
    <div class="content-wrap">
        <div class="title-wrap">
          <i class="iconfont icon-club"></i>
          <span class="icon-txt">进行中的瑜伽馆</span>
        </div>
        <ul class="club-wrap">
          <router-link :to="{name:'ClubDetail', params:{id:`${item.id}`}}" class="block" v-for="(item, index) in processing" :key="index">
            <li class="club-item" :style="{backgroundImage: `url(${item.cover})`}">
              <div class="bottom-info gradient-bg">
                <p class="mid-txt">{{item.area}}•{{item.name}}</p>
                <p class="sm-txt">地址：{{item.location}}</p>
                <p class="sm-txt">电话：{{item.phone}}</p>
              </div>
              <div class="num-tag top-tag">
                <i class="iconfont icon-people"></i>
                <span class="tag-txt">{{item.pre_book_count}}/{{item.pre_size}}</span>
              </div>
            </li>
          </router-link>
        </ul>
        <div class="title-wrap title-pos">
          <i class="iconfont icon-club"></i>
          <span class="icon-txt">认筹结束</span>
        </div>
        <ul class="club-wrap">
          <li class="club-sm-item" v-for="(item, index) in finished" :key="index">
            <div class="bottom-info dark-font">
              <p class="mid-txt">{{item.city}}•{{item.name}}</p>
              <p class="sm-txt">地址：{{item.location}}</p>
              <p class="sm-txt">电话：{{item.phone}}</p>
            </div>
            <div class="sm-divide"></div>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
import { get } from '../../common/request'
import wx from 'weixin-js-sdk'

export default {
  name: 'Recognition',
  data () {
    return {
      articles: [
        {
          image: 'http://piccdn.50yoga.cn/pics/public/sweet/images/recognition/main-banner.jpg',
          tag: '',
          title: '',
          num: ''
        },
        {
          image: 'https://static.vux.li/demo/1.jpg',
          tag: '文章',
          title: '每个女人，都要有个自己的瑜伽馆',
          num: '10000'
        }
      ],
      processing: [],
      finished: []
    }
  },
  created () {
    let openid = localStorage.openid
    if (!openid) {
      // window.location.href = 'https://xcx2018.50yoga.cn/api/shield/vote/index'
      window.location.href = 'http://192.168.0.119:2018/weixin/webview?redirect_url=' + encodeURIComponent('http://192.168.0.103:8081/#/recognition/auth')
    }
    get(`/api/hydra/book`, {
      brand_id: 164
    })
    .then(res => {
      this.processing = res.clubs_book.data
      this.finished = res.clubs_running.data
    })
    .catch(err => {
      console.log(err)
    })

    // 微信分享
    get(`/weixin/sign?url=http://mobile.50yoga.cn/&apis=onMenuShareTimeline,onMenuShareAppMessage`, {
      headers: { Accept: 'application/vnd.sci.v2+json' }
    }).then((res) => {
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.data.appId, // 必填，公众号的唯一标识
        timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.data.signature, // 必填，签名，见附录1
        jsApiList: res.data.data.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
    })
    wx.ready(function () {
      wx.onMenuShareAppMessage({
        title: '认筹test',
        desc: '认筹test',
        link: '',
        imgUrl: 'http://piccdn.50yoga.cn/pics/public/sweet/images/share-title/.png',
        success: function () {
          console.log('分享成功')
        }
      })
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
@import "../../common/styles/recg-com.styl";
  .article-swipe{
    .article-swipe-item{
      background-size cover
    }
    .article-swipe-item:before{
      position absolute
      content ''
      width 100%
      height 11.875rem
      background-image url(http://piccdn.50yoga.cn/pics/public/sweet/images/recognition/banner-mask.png)
      background-size cover
    }
  }
  .swipe-tag{
    position absolute
    right 0
    top 0.625rem
    height 1.5625rem
    line-height 1.5625rem
    padding 0 0.9375rem
    background-color $rcg_darkBg
    color #fff
    font-size 0.75rem
    border-radius 50px 0 0 50px
  }
  .swipe-info{
    position absolute
    bottom 0
    color #fff
    padding-left 0.625rem
    .info-title{
      font-size 0.875rem
      margin-bottom 0.3125rem
    }
    .info-num{
      font-size 0.75rem
      margin-bottom 0.3125rem
    }
  }
  .card-wrap{
    width 100%
    box-sizing border-box
    padding 0 0.625rem
    height 7.5rem
    background #fff
    display flex
    justify-content space-between
    align-items center
    .blue-bg{
      background-color #74a3c8
    }
    .green-bg{
      background-color #79d99f
    }
    .card-item{
      width 10.625rem
      box-sizing border-box
      padding 0 0.3125rem
      height 5rem
      border-radius 0.3125rem
      display flex
      align-items center
      justify-content space-between
      .card-txt{
        flex 1
        color #fff
        line-height 1.3
        .card-title{
          font-size 1rem
          font-weight bold
        }
        .card-content{
          font-size 0.625rem
        }
      }
      .card-icon{
        width 3.75rem
        height 3.75rem
      }
    }
  }
  .content-wrap{
    width 100%
    padding 0.9375rem
    box-sizing border-box
    .title-wrap{
      font-size 1rem
      color $rcg_defaultFont
      display flex
      align-items center
      .icon-club{
        font-size 1.1875rem
        margin-right 0.3125rem
      }
    }
    .title-pos{
      margin-top 1.25rem
    }
    .club-wrap{
      width 100%
      margin-top 0.9375rem
      .club-item{
        position relative
        width 100%
        height 9.375rem
        border-radius 0.3125rem
        background-color #ccc
        margin-bottom 0.625rem
        background-size cover
        .top-tag{
          background #484c57
          border-radius 0 0.3125rem 0 0.625rem
        }
      }
      .club-sm-item{
        position relative
        width 100%
        height auto
        border-radius 0.3125rem
        margin-bottom 0.625rem
        display flex
        flex-direction column
        justify-content center
      }
    }
  }
  .mint-swipe-indicators{
    right 0 !important
  }
  .block{
    display block
  }
.bottom-info{
  position absolute
  bottom 0
  width 100%
  box-sizing border-box
  padding 0.3rem 0.625rem
  color #fff
  line-height 1.4
  .mid-txt{
    font-size 1rem
  }
  .sm-txt{
    font-size 0.75rem
  }
}
.dark-font{
  color $rcg_defaultFont
  position relative
}
.sm-divide{
  width 100%
  position relative
  height 1px
  background-color $rcg_lightFont
  margin-top: 0.625rem;
}
.gradient-bg{
  background linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6));
}
</style>
